<template>
  <div>
    <el-switch v-model="selectWidget.options.isAutoStorage" @change="handelChangeValue" />
    <div v-if="selectWidget.options.isAutoStorage" class="prop-item">
      <el-form ref="storageForm" :model="selectWidget" class="props-scrollbar-form" label-position="top">
        <el-form-item class="is-required" label="最多存储条数" style="margin-bottom: 0;">
          <el-input-number
            v-model="maxLength"
            :min="1"
            :max="1000"
            :precision="0"
            :step="1"
            controls-position="right"
            class="width240 input-number"
            size="small"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';

import { mapState } from 'vuex';
export default {
  components: { selectWithoutHttp },
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    },
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    }
  },
  data() {
    return {
      maxLength: 10
    };
  },
  computed: {
    ...mapState({
      'userWidget': state => state.formMake.widgetTypes.user,
      'userInfo': state => state.user.userInfo
    })
  },
  watch: {
    maxLength: {
      handler(val) {
        this.selectWidget.options.storageMaxLength = val;
      }
    }
  },
  created() {
    this.maxLength = this.selectWidget.options.storageMaxLength || 10;
  },
  methods: {
    handelChangeValue(e) {
      this.$emit('handelChangeValue', e);
      if (e) {
        this.selectWidget.options.storageMaxLength = this.maxLength;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.input-number {
  &::v-deep {
    .el-input__inner {
      text-align: left;
    }
    .el-input-number__increase,.el-input-number__decrease {
      background: #fff;
    }
  }
}
.prop-item {
  margin-top: 15px;
  .label {
    font-size: 14px;
    color: #606266;
  }
}
</style>
